<template>
  <div class="image-wrapper" @click="imgClick">
    <!-- 图片懒加载的功能  当图片没有加载出来的时候，给他一个占位图， 当图片加载完毕的时候把真实的路径赋值给他 -->
    <img src="/loading.jpg" v-real-img="src" :class="{'round': round}" alt />
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String
    },
    round: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    imgClick() {
      this.$emit("onClick");
    }
  }
};
</script>

<style lang='scss'>
.image-wrapper {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
  .round {
    border-radius: 50%;
  }
}
</style>